<template>
  <!-- 协议管理--个人 -->
  <div class="mod-demo-ueditor">
    <el-alert title="提示："
              type="warning"
              :closable="false">
      <!-- <div slot-scope="description">
        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
        <p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
      </div> -->
    </el-alert>

    <script :id="ueId"
            class="ueditor-box"
            type="text/plain"
            style="width: 100%; height: 260px;">请在这里书写个人协议相关内容</script>

    <!-- 获取内容 -->
    <p>
      <el-button @click="getContent()">保存内容</el-button>
    </p>
    <el-dialog title="内容"
               :visible.sync="dialogVisible"
               :append-to-body="true">
      {{ ueContent }}
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ueditor from 'ueditor'
export default {
  data () {
    return {
      ue: null,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      ueContent: '',
      dialogVisible: false,
      serverUrl: ''
    }
  },
  mounted () {
    this.serverUrl = this.$baseUrl + '/sys/usageprotocol/update'
    let url = this.serverUrl
    this.ue = ueditor.getEditor(this.ueId, {
      serverUrl: url, // 服务器统一请求接口路径
      zIndex: 3000
    })
    this.ue.ready(() => {
      // 设置编辑器的内容
      this.$http({
        url: this.$http.adornUrl('/sys/usageprotocol/info/2'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        // console.log(data.usageProtocol.content)
        this.ue.setContent(data.usageProtocol.content)
      })
    })
  },
  methods: {
    getContent () {
      // this.dialogVisible = true
      this.ue.ready(() => {
        this.ueContent = this.ue.getContent()
        this.$http({
          url: this.$http.adornUrl('/sys/usageprotocol/update'),
          method: 'post',
          data: this.$http.adornParams({
            'content': this.ueContent,
            'id': 2,
            'title': '派送业务合作协议'
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                // this.pageIndex = 1
                // this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.mod-demo-ueditor {
  position: relative;
  z-index: 510;
  > .el-alert {
    margin-bottom: 10px;
  }
}
</style>
